<template>
  <div>
    <input
      type="text"
      v-model='name'
    >
    <h1>{{name|qqq(2,3,4,5,6,7,8)}}</h1>
    <h2
      v-hello='name'
      v-color='"blue"'
      v-permission='3'
    >{{n|money}}元</h2>

    <button @click='toA'>A</button>
    <button @click='toB'>B</button>
    <keep-alive :include="/A/">
      <!-- include   exclude -->
      <component :is="componentId"></component>
    </keep-alive>

  </div>
</template>
<script>
// @ is an alias to /src
import A from "./componnets/A.vue";
import B from "./componnets/B.vue";
export default {
  name: "XXX",
  data() {
    return {
      name: "zf",
      n: 100,
      componentId: A,
    };
  },
  methods: {
    toA() {
      this.componentId = A;
    },
    toB() {
      this.componentId = B;
    },
  },
  // directives:{
  //   www(){},
  //   eee:{}
  // },
  components: {},
};
</script>
<style lang="less">
</style>